<template>
  <div id="footer" class="u-flex-col u-col-center">
    <!-- <div class="logo">
      <img src="@/assets/img/logo_white.png" alt="logo图" />
    </div> -->
    <!-- <p class="title">公司企业网站模板</p> -->
    <!-- <div style="margin-top: 10px">
      <el-popover placement="bottom" :width="70" trigger="hover">
        <template #reference>
          <div style="text-align: center">
            <img
              src="https://static2.ichunqiu.com/icq/resources/images/common/wxIcon.png"
              style="width: 35px; height: 35px"
            />
          </div>
        </template>
        <div style="text-align: center">
          <img :src="connectInfo.wechat" style="width: 100px" />
        </div>
      </el-popover>
    </div> -->
    <div class="address_tel_fax u-flex u-row-between">
      <p>地址：{{ connectInfo.address }}</p>
      <p style="margin: 0px 30px">联系电话：{{ connectInfo.phone }}</p>
      <p>邮箱：{{ connectInfo.email }}</p>
    </div>

    <!-- <div class="email_wx">
      <p>
        博客：<a :href="blog + 'neveryu/'" style="color: #fff">{{ blog }}</a>
      </p>
      <p>邮箱：{{ email }}</p>
      <p>公司QQ号：{{ qq }}</p>
    </div> -->
    <p class="copy">Copyright &copy; 2018 - Now {{ company }}</p>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
const address = import.meta.env.VITE_APP_ADDRESS;
const phone = import.meta.env.VITE_APP_PHONE;
const email = import.meta.env.VITE_APP_EMAIL;
const qq = import.meta.env.VITE_APP_QQ;
const company = import.meta.env.VITE_APP_COMPANYNAME;
const blog = import.meta.env.VITE_APP_BLOG;
const qqgroup = import.meta.env.VITE_APP_QQGROUP;

import homeApi from "@/api/home";

let connectInfo = reactive({});
onMounted(() => {
  homeApi.getconnectUS().then((res) => {
    console.log(res);
    // Object.assign(bannerList, res.data);
    Object.assign(connectInfo, res.data);
  });
});
</script>

<style scoped>
#footer {
  height: 100%;
  color: #fff;
  background: #474747;
  overflow: hidden;
  text-align: center;
  margin: 0px;
}

.logo {
  width: 95px;
  height: 45px;
  margin: 50px auto 20px;
}

.title {
  font-size: 25px;
  margin-bottom: 20px;
}

.address_tel_fax {
  color: #fff;
  font-size: 15px;
  margin: 20px 0px;
}

.email_wx {
  color: #d3d3d3;
  font-size: 14px;
}

.copy {
  /* color: #d3d3d3; */
  color: #fff;
  font-size: 15px;
}

@media screen and (max-width: 997px) {
  .title {
    font-size: 20px;
  }

  .address_tel_fax {
    font-size: 12px;
  }

  .email_wx {
    font-size: 12px;
  }

  .copy {
    font-size: 12px;
    margin: 0px 0 10px;
  }
}
</style>
